<template>
    <div class="zichan">
        <div class="zichan-q">
            我的资产
        </div>
        <div class="assestList">
            <div class="assestItem">
                ￥<span>0</span>
                <p>余额</p></div>
            <div class="assestItem">
                <span>0</span>
                <p>红包</p></div>
            <div class="assestItem">
                <span>0</span>
                <p>优惠券</p></div>
            <div class="assestItem">
                <span>0</span>
                <p>积分</p></div>
            <div class="assestItem">
                <span>0</span>
                <p>礼品卡</p></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ZiChansh"
    }
</script>

<style scoped>

    .zichan {
        width: 100%;
        height: 7rem;
        margin-top: 5%;
        border-bottom: 10px solid #f4f4f4;

    }

    .zichan-q {
        border-bottom: 1px solid #d9d9d9;
        width: 90%;
        margin-left: 5%;
        height: 30%;
        margin-bottom: 20px;
    }

    .assestList {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        font-size: 12px;
    }

    .assestItem {
        text-align: center;
    }
    span{font-size: 16px;
        line-height: 20px;
    }


</style>